<template lang="pug">
    .head-navigate.theme-bg(:style="{width: winWidth + 'px'}")
    .head-navigate-left 智能充电桩后台管理系统
    .head-navigate-right
    .user-info
    .base-info(@mouseenter="showUserInfoFloatDialog1 = true", @mouseleave="leaveUserInfo")
    img(:src="$utils.imgPath(userInfo.headingUrl)")
    | {{userInfo.userName}}
    .user-info-float-dialog(@mouseenter="showUserInfoFloatDialog2 = true", @mouseleave="showUserInfoFloatDialog2 = false", v-if="showUserInfoFloatDialog1 || showUserInfoFloatDialog2")
    div(@click="dialogFormVisible = true") 个人信息
    div 修改密码
    div(@click="logout") 退出
</template>

<script>
    import Cropper from '../../components/Cropper'
    import { get } from '@utils/util'
    import { deleteCookie } from '@utils/cookies'
    export default {
        data() {
            return {
                showUserInfoFloatDialog1: false,
                showUserInfoFloatDialog2: false
            }
        },
        methods: {
            leaveUserInfo() {
                setTimeout(() => {
                    this.showUserInfoFloatDialog1 = false
                }, 200)
            },
            logout() {
                debugger
                deleteCookie('sm-isLogin-cookies')
                this.$router.push('/login')
                this.$store.set('dialog/operateConfirmInfo', {
                    show: true,
                    text: '确定退出本系统嘛?',
                    confirmCallback: async () => {
                        // const {code} = (await this.$http.post('/manage/index/logout')).data

                    }
                })
            }
        },
        computed: {
            winWidth: get('base/winWidth'),
            userInfo: get('base/userInfo')
        },
        components: { Cropper }
    }
</script>

<style scoped lang="stylus">
    .head-navigate padding 0 40px box-sizing border-box margin 0 width 100% height 50px line-height 50px display flex justify-content space-between .head-navigate-left color #fff font-family Cursive font-size 22px .user-info height 50px position relative .base-info display flex align-items center height 100% img width 40px height 40px border-radius 50% margin-right 10px .user-info-float-dialog position absolute background-color #fff right 0 top 50px width 130px border 1px solid #e3e3e3 border-radius 5px>div text-align center font-size 14px height 35px line-height 35px padding 0 15px cursor pointer &:hover background-color #d1d1f0
</style>